<!--
 * @Author: yaoling 1871883713@qq.com
 * @Date: 2022-10-20 11:43:56
 * @LastEditors: yaoling 1871883713@qq.com
 * @LastEditTime: 2022-12-06 14:55:28
 * @FilePath: \company-world\src\views\home\components\Workbench.vue
 * @Description: 工作台
-->
<template>
  <div class="message-avatar" v-show="showWork">
    <div class="message">
      <el-button color="#6C52EA" :loading="state.loading" :icon="Monitor" @click="onJumpRouter">
        工作台</el-button
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Monitor } from '@element-plus/icons-vue'
import { reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
/**
 * @desc: 监听路由变化
 * showWork：工作台按钮显示隐藏
 */
const showWork = ref(false)
watch(
  () => router.currentRoute.value.fullPath,
  (newVal) => {
    if (newVal !== '/home/home-page') {
      showWork.value = true
    } else {
      showWork.value = false
    }
  },
  { immediate: true }
)
/**
 * @desc: 点击跳转路由
 */
const state = reactive({
  loading: false
})
const onJumpRouter = () => {
  state.loading = true
  setTimeout(function () {
    state.loading = false
  }, 500)
  router.push({ name: 'HomePage' })
}
</script>

<style lang="less" scoped>
.message-avatar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 112px;
  .message {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    padding-left: 5px;
    box-sizing: border-box;
    background: #f2f4f7;
    border-radius: 6px;
    .icon {
      padding-right: 5px;
      box-sizing: border-box;
      font-size: 22px;
    }
  }
}
</style>
